<template>
	<div>
		<div id="app">
			<ul>
				<li>
					<router-link to="/film01" style="color: white;">
						<div class="_1SPsM" title="紧急救援"></div><img src="../images/031.jpg" alt="紧急救援">
					</router-link>
					<p>紧急救援</p>
				</li>
				<li>
					<router-link to="/film02" style="color: white;">
						<div class="_1SPsM" title="神奇女侠"></div><img src="../images/032.jpg" alt="神奇女侠">
					</router-link>
					<p>神奇女侠</p>
				</li>
				<li>
					<a href="/film03" target="_blank">
						<div class="_1SPsM" title="哆啦A梦"></div><img src="../images/033.jpg" alt="哆啦A梦">
					</a>
					<p>哆啦A梦</p>
				</li>
		
				<li>
					<a href="/film04" target="_blank">
						<div class="_1SPsM" title="明天你是否爱我"></div><img src="../images/034.jpg" alt="明天你是否爱我">
					</a>
					<p>明天你是否爱我</p>
				</li>
				
				<li>
					<a href="/film05" target="_blank">
						<div class="_1SPsM" title="疯狂的原始人2"></div><img src="../images/035.jpg" alt="疯狂的原始人2">
					</a>
					<p>疯狂的原始人</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="金刚川"></div><img src="../images/036.jpg" alt="金刚川">
					</a>
					<p>金刚川</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="海底小纵队-火焰之环"></div><img src="../images/037.jpg" alt="海底小纵队-火焰之环">
					</a>
					<p>海底小纵队-火焰之环</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="奇妙王国之魔法奇缘"></div><img src="../images/038.jpg" alt="奇妙王国之魔法奇缘">
					</a>
					<p>奇妙王国之魔法奇缘</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="皆大欢喜"></div><img src="../images/039.jpg" alt="皆大欢喜">
					</a>
					<p>皆大欢喜</p>
				</li>
				
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="信念一生"></div><img src="../images/040.jpg" alt="信念一生">
					</a>
					<p>信念一生</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="奇妙王国之魔法奇缘"></div><img src="../images/041.jpg" alt="奇妙王国之魔法奇缘">
					</a>
					<p>奇妙王国之魔法奇缘</p>
				</li>
				
				<li>
					<a href="#" target="_blank">
						<div class="_1SPsM" title="守望相思树"></div><img src="../images/042.jpg" alt="守望相思树">
					</a>
					<p>守望相思树</p>
				</li>
				
				<li>
					<a href="/movieDetail?movieId=227727&amp;coming=false" target="_blank">
						<div class="_1SPsM" title="闺蜜心窍"></div><img src="../images/014.jpg" alt="闺蜜心窍">
					</a>
					<p>闺蜜心窍</p>
				</li>
				<li>
					<a href="/movieDetail?movieId=227727&amp;coming=false" target="_blank">
						<div class="_1SPsM" title="科里奥兰纳斯"></div><img src="../images/013.jpg" alt="科里奥兰纳斯">
					</a>
					<p>科里奥兰纳斯</p>
				</li>
				<li>
					<a href="/" target="_blank">
						<div class="_1SPsM" title="闺蜜心窍"></div><img src="../images/011.jpg" alt="李尔王">
					</a>
		              <p>李尔王</p>
				</li>
				<li>
					<a href="/movieDetail?movieId=227727&amp;coming=false" target="_blank">
						<div class="_1SPsM" title="数码宝贝"></div><img src="../images/012.jpg" alt="数码宝贝">
					</a>
					<p>数码宝贝</p>
				</li>
			</ul>
		</div>
		<div style="margin-top: 400px;">
			<fotter></fotter>
		</div>
	</div>
</template>

<script>
	import fotter from "./common/footer.vue"
	export default {
	   components: {
	   	fotter
	   },

	}
</script>

<style scoped>
	#app {
		width: 1400px;
		margin: 0 auto;
		height: 1200px;

	}

	#app ul li {
		float: left;
		width: 250px;
		height: 380px;
		margin-left: 10px;
		margin-bottom: 10px;
		/* border: 1px solid #000000; */
	}
	.box1 {
		position: absolute;
		top: 1500px;
		left: 200px;
	}

	#app ul li:hover {
		box-shadow: 0 0 20px -5px;
	}

	img {
		width: 100%;
		height: 90%;
	}
</style>
